<template>
  <view class="container">
    <view class="top-tab">
      <view :class="['item', commentTag == '' ? 'select' : '']" @click="pjTag('')">
        <text>全部</text><text>{{ statistics ? statistics["total"] : 0 }}</text>
      </view>
      <view
        :class="['item', commentTag == key ? 'select' : '']"
        v-for="(item, key) of c_tag"
        @click="pjTag(key)"
      >
        <text>{{ item }}</text>
      </view>
    </view>

    <view class="e-list">
      <view class="e-item" v-for="(item, i) in comment_list" :key="item.id">
        <view class="top">
          <view class="left">
            <image :src="$img_base_url(item.user.avatar)" mode="aspectFill"></image>
            <view class="user">
              <view class="name">
                {{ item.user.nickname }}
              </view>
              <view class="star">
                <uni-rate allow-half color="#DDDDDD" size="26" activeColor="#F2CB51" :value="item.score" />
                <!-- <image v-for="(item,i) in 5" :src="i<4 ? $img_path('/common/star_1.png') : $img_path('/common/star_2.png')" mode="widthFix"></image> -->
              </view>
            </view>
          </view>
          <view class="time">
            {{ $dayjs.unix(item.createtime).format("YYYY-MM-DD") }}
          </view>
        </view>
        <view class="content-text">
          {{ item.content }}
        </view>
        <view class="img-list">
          <view class="tow" v-if="item.images.length <= 2">
            <view
              class="img-item"
              v-for="(item_img, idx) in item.images"
              :key="idx"
              @click="preview(item.images)"
            >
              <image :src="$img_base_url(item_img)" mode="aspectFill"></image>
            </view>
          </view>
          <view class="other" v-else>
            <view class="img-item" v-for="item_img in item.images" @click="preview(item.images)">
              <image :src="$img_base_url(item_img)" mode="aspectFill"></image>
            </view>
          </view>
        </view>

        <!-- <view class="sj-msg">
					平台回复：内容内容内容内容内容内容内容内容内容内容内容内容
				</view> -->

        <view class="dz-box">
          <view class="left" v-if="item.suk">
            <text>{{ item.suk }}</text>
            <!-- <text>浏览</text><text>1000</text> -->
          </view>
          <view class="right">
            <!-- <image :src="$img_path('/mall/14.png')" mode="widthFix"></image>
						<text>100</text> -->
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
const FormData = require("@/utils/formdata/index.js");
import { getCommentList } from "@/utils/api/mallApi.js";
export default {
  data() {
    return {
      goods_id: null,
      c_tag: {
        good: "好评",
        pertinent: "中评",
        poor: "差评",
        figure: "有图",
      },
      tab_index: 1,
      commentTag: "", //good=好评,pertinent=中评,poor=差评,figure=有图
      statistics: {},
      comment_list: [],
    };
  },
  onLoad(options) {
    this.goods_id = options.id;
  },
  onShow() {
    this.getComment();
  },
  methods: {
    // 评论列表
    getComment() {
      let formData = new FormData();
      // formData.append('id',this.goods_id)
      // formData.append('tag',this.commentTag)
      let data = {
        id: this.goods_id,
        tag: this.commentTag,
      };
      // getCommentList(formData.getData()).then(res=>{
      getCommentList(data).then((res) => {
        this.comment_list = res.data.comment.data;
        this.statistics = res.data.statistics;
      });
    },
    //
    pjTag(str) {
      this.commentTag = str;
      this.getComment();
    },

    // 查看图片
    preview(urls) {
      let img = this.$img_base_url(urls[0]);
      uni.previewImage({
        current: img,
        urls: [img],
        fail: (fail) => {
          console.log(fail);
        },
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.container {
  .top-tab {
    padding: 20rpx 22rpx 0;
    box-sizing: border-box;
    display: flex;
    flex-wrap: wrap;
    background-color: #ffffff;
    .item {
      padding: 10rpx 22rpx;
      background: #ffeeee;
      border-radius: 8rpx 8rpx 8rpx 8rpx;
      font-weight: bold;
      font-size: 28rpx;
      color: #999999;
      line-height: 40rpx;
      margin-bottom: 20rpx;
      margin-right: 20rpx;
      text:last-child {
        margin-left: 8rpx;
      }
      &.select {
        color: #ffffff;
        background: #e72a2a;
      }
    }
  }

  .e-list {
    padding: 0 22rpx;
    box-sizing: border-box;
    .e-item {
      background: #ffffff;
      box-shadow: 0rpx 0rpx 12rpx 2rpx rgba(223, 223, 223, 0.16);
      border-radius: 20rpx;
      padding: 16rpx 20rpx 40rpx;
      box-sizing: border-box;
      margin-top: 20rpx;
      .top {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        .left {
          display: flex;
          align-items: center;
          & > image {
            width: 90rpx;
            height: 90rpx;
            border-radius: 50%;
          }
          .user {
            margin-left: 20rpx;
            .name {
              font-weight: bold;
              font-size: 28rpx;
              color: #333333;
              line-height: 40rpx;
            }
            .star {
              display: flex;
              margin-top: 8rpx;
              image {
                width: 26rpx;
                height: 26rpx;
                margin-right: 6rpx;
              }
            }
          }
        }
        .time {
          font-weight: bold;
          font-size: 24rpx;
          color: #999999;
          line-height: 34rpx;
        }
      }

      .content-text {
        font-weight: bold;
        font-size: 30rpx;
        color: #333333;
        line-height: 42rpx;
        margin-top: 20rpx;
      }

      .img-list {
        width: 100%;
        overflow: hidden;
        .tow {
          width: 100%;
          display: flex;
          justify-content: space-between;
          .img-item {
            width: 320rpx;
            height: 320rpx;
            aspect-ratio: 1/1;
            position: relative;
            margin-top: 20rpx;
            image {
              width: 100%;
              height: 100%;
              border-radius: 20rpx;
              background-color: #595a5c;
            }
          }
        }
        .other {
          width: calc(100% + 30rpx);
          display: flex;
          flex-wrap: wrap;
          .img-item {
            width: calc(33.333% - 30rpx);
            aspect-ratio: 1/1;
            margin-top: 20rpx;
            margin-right: 30rpx;
            image {
              width: 100%;
              height: 100%;
              border-radius: 20rpx;
              background-color: #595a5c;
            }
          }
        }
      }

      .sj-msg {
        padding: 16rpx 20rpx;
        box-sizing: border-box;
        background: #eeeeee;
        border-radius: 16rpx;
        font-weight: 400;
        font-size: 28rpx;
        color: #484848;
        line-height: 40rpx;
        margin-top: 20rpx;
      }
      .dz-box {
        margin-top: 20rpx;
        display: flex;
        align-items: center;
        justify-content: space-between;
        .left {
          text {
            font-weight: 400;
            font-size: 28rpx;
            color: #848484;
            line-height: 40rpx;
            &:last-child {
              margin-left: 10rpx;
            }
          }
        }
        .right {
          display: flex;
          align-items: flex-end;
          image {
            width: 33.16rpx;
            height: 33.16rpx;
          }
          text {
            font-weight: bold;
            font-size: 28rpx;
            color: #333333;
            line-height: 30rpx;
            margin-left: 8rpx;
          }
        }
      }
    }
  }
}
</style>
